import SwiftUI

// Animatable properties

struct AnimatableProperties_Color: View {
    @State var isBlue = true; // 
    
    var body: some View {
        VStack(spacing: 30) {
            Text("Animatable properties")
                .font(.largeTitle)
            
            Text("Color")
                .font(.title)
                .foregroundColor(.gray)
            
            Text("You can animate the change from one color to another.")
                .padding()
                .font(.title3)
                .frame(maxWidth: .infinity)
                .foregroundColor(.black)
                .background(
                    Color.orange
                )
            
            // Demo view
            makeDemoView()
            
            Spacer()
            
            Button(action: {
                isBlue.toggle()
            }, label: {
                Text("Change")
                    .font(.title)
                    .padding(.bottom, 50)
            })
        }
    }
    
    func makeDemoView() -> some View {
        // Color change
        // With animation
        // vs.
        // No Animation
        VStack {
            Text("With Animation")
                .font(.title2)
            // Rectangle1
            RoundedRectangle(cornerRadius: 20)
                .padding(.horizontal)
                .foregroundColor(isBlue ? .blue : .pink)
                .animation(.easeInOut, value: isBlue)
            
            
            Text("No Animation")
                .font(.title2)
            // Rectangle2
            RoundedRectangle(cornerRadius: 20)
                .padding(.horizontal)
                .foregroundColor(isBlue ? .blue : .pink)
        }
    }
}
